<template>
  <view class="goods-list clearfix">
    <view
      v-for="(item, index) in productList"
      :key="index"
      class="flex-item"
      @click="viewProductDetailFn(item)"
    >
      <image class="pic" :src="item.skuList ? item.skuList[0].skuImg : item.spuImg">
        <!--      <view class="name uni-ellipsis-2" v-html="item.skuList ? item.skuList[0].skuName : item.spuName" />-->
        <view class="name uni-ellipsis-2">
          <mp-html :content="item.skuList ? item.skuList[0].skuName : item.spuName" />
        </view>
        <view class="price_row">
          <view class="price">
            <text class="price-header">￥</text>
            {{ item.skuList ? Number(item.skuList[0].salePrice).toFixed(2) : Number(item.priceRange).toFixed(2) }}
          </view>
          <view class="shop_cart" @click.stop="handleAddShopping(item)">
            <img src="/static/image/shopping_cart.png" alt="添加购物车">
          </view>
        </view>
        <view class="pro">
          <!--
            item.skuList[0].stock==1 -> 现货
            item.skuList[0].stock!=1-> 订货
            item.skuList[0].productTag==10 -> 协议商品(签约客户展示的标签，小程序无需展示)
            item.skuList[0].activityType==10 -> 特价
            item.skuList[0].activityType==20 -> 满减
         -->
          <text v-if="item.skuList[0].stock==1" class="pro-img t-icon t-icon-xianhuo_tongyong_1" />
          <text v-if="item.skuList[0].stock!=1" class="pro-img t-icon t-icon-dinghuo_tongyong_1" />
        </view>
      </image>
      <view class="shopcart_wrap">
        <view class="specs_text">{{ item.skuNum }}个规格</view>
        <!-- <u-row type="flex" justify="space-between">
          <view class="specs_text">{{ item.skuNum }}个规格</view>
          <view @click.stop="handleAddShopping(item)">
            <u-icon name="plus-circle-fill" size="24px" color="#aaa" />
          </view>
        </u-row> -->
      </view>
      <view class="shopcart_wrap">
        <view class="activityTag">{{ (item.skuList[0].activityTag?item.skuList[0].activityTag:[]).toString() }}</view>
      </view>
    </view>
    <!-- 规格选择popup - 相关变量和方法均在addShoppingCartMixin混入中 -->
    <SelectSpecPopup
      callback-url="/productList/productList/index"
      :url-params="options"
      :product-type="speciPopup.productType"
      :speci-show.sync="speciPopup.show"
      :shop-num.sync="speciPopup.purchaseNum"
      :default-shop-num.sync="speciPopup.minOrderNum"
      :order-limit-type.sync="speciPopup.orderLimitType"
      :detail-info="speciPopup.details"
      :new-sku-infos="speciPopup.skuInfo"
      :sale-flag="speciPopup.isNotSale"
      @addShopCar="addPurchaseOrder"
      @buy="purchaseNow"
      @changeSpeci="changeSpecSelect"
    />
  </view>
</template>

<script>
import SelectSpecPopup from '@/components/select-spec-popup/index'
import addShoppingCartMixin from '@/shopDetail/addShoppingCartMixin'
export default {
  name: 'Index',
  components: {
    SelectSpecPopup
  },
  mixins: [addShoppingCartMixin],
  props: {
    spuList: {
      type: Array,
      default: () => {
        return []
      }
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    productList() {
      return this.spuList
    }
  },
  methods: {
    viewProductDetailFn(res) {
      const {
        spuCode,
        skuList,
      } = res
      const {
        skuCode,
        opsRequestMisc,
        requestId,
        itemId,
        productType,
      } = skuList[0]
      console.log('进详情skucode取值', skuCode)
      uni.navigateTo({
        url: `/shopDetail/index?spuCode=${spuCode}&skuCode=${skuCode}&productType=${productType}&opsRequestMisc=${opsRequestMisc}&requestId=${requestId}&itemId=${itemId}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
/*商品列表*/
.goods-list{
  padding:0 23rpx 0;
  .flex-item{
    float: left;
    width:calc(50% - 66rpx);
    height: 632rpx;
    margin:16rpx 9rpx 0;
    background:$uni-bg-color;
    padding:0 24rpx 12rpx;
    border-radius: 8rpx;
    overflow: hidden;
    .pic{
      width: 334rpx;
      height: 334rpx;
      overflow: hidden;
      margin: 0 -24rpx;
    }
    .name{
      height: 72rpx;
      line-height: 36rpx;
      font-size:$uni-font-size-base;
      overflow: hidden;
    }
    .price_row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding:16rpx 0 8rpx;
      .price{
        color: $uni-orange;
        font-size: $uni-font-size-lg;
        font-weight: bold;
        .price-header{
          font-size: $uni-font-size-sm;
        }
      }
      .shop_cart {
        img {
          display: block;
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .pro{
      height: 32rpx;
      .pro-img{
        width: 56rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
    .shopcart_wrap {
      margin-top: 16rpx;
      .specs_text{
        color: #aaa;
      }
      .activityTag{
        color: #FF5533
      }
    }
  }
}
</style>
